<template>
	<view class="mainbgc">
		<header-top :messageInfo="{typeFlag:true,message:'添加客户',liner:false}"></header-top>
		<view class="mainpadding paddingbom">
			<view class="searchinput flexleft">
				<view class="searchimg"></view>
				<input type="text" class="seletext" v-model="keyword" placeholder="请输入客户名称" confirm-type="search"
					@confirm="init()">
			</view>
			<view class="flexbetween margin_top">
				<view class="itembox flexbetween" @click="khPianQuShow= true">
					<view class="seletext margin_right">{{khPianQuText==""?'客户片区': khPianQuText}}</view>
					<view class="righticon2"></view>
				</view>
				<view class="itembox flexbetween" @click="khDengJiShow = true">
					<view class="seletext margin_right">{{khDengJiText==""?'客户等级': khDengJiText}}</view>
					<view class="righticon2"></view>
				</view>
				<view class="itembox flexbetween" @click="khLeiBieShow = true">
					<view class="seletext margin_right">{{khLeiBieText==""?'客户类别': khLeiBieText}}</view>
					<view class="righticon2"></view>
				</view>
			</view>
			<view class="flexcenter" v-if="!list.data.length">
				<view class="placeholderimage"></view>
			</view>
			<view class="flexleft ffffff radius mainpadding_top" v-for="(item,index) in list.data" :key="item.id"
				@click="selectitem(item)">
				<view class="leftradio margin_right">
					<!-- 选中 -->
					<view class="selecticon" v-show="item.is_check">
						<image src="@/static/image/system/dui.png" mode=""></image>
					</view>
					<!-- 未选中 -->
					<view class="noselecticon" v-show="!item.is_check"></view>
				</view>
				<!-- 右边内容 -->
				<view class="rightcontent">
					<view class="flexbetween" style="position: relative;">
						<view class="flexleft">
							<view class="titletext margin_right" style="color: #0bbdcb;">{{item.customtype.name}}</view>
							<view class="titletext">{{item.name}}</view>
						</view>
						<!-- 等级 -->
						<view class="ylable importfive flexcenter">{{item.customlevel.name}}</view>
					</view>
					<view class="flexbetween margin_top">
						<view class="">
							<view class="flexbetween">
								<view class="flexleft">
									<view class="smalltext">姓名：{{item.staff.username}} {{item.staff.mobile}}</view>
								</view>
							</view>
							<view class="flexleft margin_top">
								<view class="smalltext">地址：{{item.cityinfo}}{{item.address}}</view>
								<!-- <view class="addresstext">{{kmUnit(Number(item.distance))}}</view> -->
							</view>
						</view>
						<view class="flexright">
							<view class="addressicon margin_right" style="width: 70rpx;height: 70rpx;"
								@click.stop="openmap(item)"></view>
							<view class="phoneicon" style="width: 70rpx;height: 70rpx;"
								@click.stop="phone(item.staff.mobile)"></view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="yesbtn" @click="submit">确认({{selectarr.length}})</view>
		<selectKHDengJi :message="{khDengJiShow:khDengJiShow}" @khDengJiSure="khDengJiSure"></selectKHDengJi>
		<!-- 客户等级 -->
		<selectKHLeiBie :message="{khLeiBieShow:khLeiBieShow}" @khLeiBieSure="khLeiBieSure"></selectKHLeiBie>
		<!-- 客户类别 -->
		<selectKHPianQu :message="{khPianQuShow:khPianQuShow}" @khPianQuSure="khPianQuSure"></selectKHPianQu>
		<!-- 客户片区 -->
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				// 客户等级
				khDengJiShow: false,
				khDengJiText: "",
				custom_level_id: "", //客户等级ID
				// 客户类别
				khLeiBieShow: false,
				khLeiBieText: "",
				custom_type_id: "", //客户类别ID
				// 客户片区
				khPianQuShow: false,
				khPianQuText: "",
				custom_area_id: "", //客户片区ID
				page: 1,
				limit: 12,
				list: {
					data: []
				},
				selectarr:[],
				lat: "35.17466",
				lng: "109.67307",
				keyword: "",
				start_time:"",
				end_time:"",
				type:"1",
				title:"",
				staff_id:"",
			}
		},
		onLoad(options) {
			let data = JSON.parse(decodeURIComponent(options.data));
			console.log(data);
			this.start_time = data.start_time
			this.end_time = data.end_time
			this.type = data.type
			this.title = data.title
			this.staff_id = data.staff_id
		},
		onShow() {
			// #ifdef APP-PLUS
			this.getlocation()
			// #endif
			// #ifdef MP-WEIXIN || H5
			this.init()
			// #endif
		},
		methods: {
			submit() {
				httpRequest.request('/dhtapi/Custom/addVisitRw', 'POST', {
					title:this.title,
					start_time:this.start_time,
					end_time:this.end_time,
					custom_ids:this.selectarr.join(),
					type:this.type,
					staff_id:this.staff_id
				}, false, false, true).then(res => {
					httpRequest.toast(res.msg)
					if(res.code==1){
						setTimeout(()=>{
							uni.navigateBack({
								delta:2
							})
						},500)
					}
				}).catch(err=>{
					httpRequest.toast(err.msg)
				})
			},
			// 获取当前位置信息
			getlocation() {
				let _this = this
				console.log("获取经纬度信息")
				uni.getLocation({
					type: 'gcj02',
					geocode: true, //设置该参数为true可直接获取经纬度及城市信息
					success: function(res) {
						console.log("获取经纬度信息", res)
						_this.lat = res.latitude
						_this.lng = res.longitude
						_this.init()
					},
					fail(err) {
						console.log(err, "定位错误信息")
					}
				});
			},
			init(isPage, page) {
				let _this = this;
				httpRequest.request("/dhtapi/Custom/index", 'POST', {
					page: page || 1,
					limit: _this.limit,
					keyword: this.keyword,
					lng: this.lng,
					lat: this.lat,
					start_time: this.start == '开始时间' ? '' : this.start, //开始日期
					end_time: this.end == '结束时间' ? '' : this.end, //结束日期
					custom_area_id: this.custom_area_id,
					custom_level_id: this.custom_level_id,
					custom_type_id: this.custom_type_id,
				}, false, false, true).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.list;
						res.data.data.forEach(item=>{
							this.$set(item,"is_check",false)
						})
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							_this.list = resList
							_this.list.data = resList.data;
						}
						this.pagesshow = true
					}
					console.log(this.list)
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
			khDengJiSure(e) { //客户等级
				if (e) {
					this.khDengJiText = e.value[0].name
					this.custom_level_id = e.value[0].id
				}
				this.khDengJiShow = false
			},
			khLeiBieSure(e) { //客户类别
				if (e) {
					this.khLeiBieText = e.value[0].name
					this.custom_type_id = e.value[0].id
				}
				this.khLeiBieShow = false
			},
			khPianQuSure(e) { //客户片区
				if (e) {
					this.khPianQuText = e.value[0].name
					this.custom_area_id = e.value[0].id
				}
				this.khPianQuShow = false
			},
			// 选择并将客户id放进selectarr内
			selectitem(item) {
				if (item.is_check) {
					item.is_check = false
					let index = this.selectarr.indexOf(item.id)
					this.selectarr.splice(index, 1)
				} else {
					item.is_check = true
					this.selectarr.push(item.id)
				}
			},
			// 打开地图
			openmap(item) {
				uni.openLocation({
					latitude: Number(item.latitude), //即将传到高德或腾讯地图的终点纬度  必须是数值，字符串无效
					longitude: Number(item.longitude), //即将传到高德或腾讯地图的终点经度  必须是数值，字符串无效
					name: item.address, //即将传到高德或腾讯地图的店铺名称
					address: item.address, //即将传到高德或腾讯地图的详细地址
				})
			},
			phone(p) {
				uni.makePhoneCall({
					phoneNumber: p.toString()
				}).catch((e) => {
					// console.log(e)  //用catch(e)来捕获错误{makePhoneCall:fail cancel}
				})
			},
			// 米，公里转换
			kmUnit(m) {
				var v;
				if (typeof m === 'number' && !isNaN(m)) {
					if (m >= 1000) {
						v = (m / 1000).toFixed(2) + 'km'
					} else {
						v = m + 'm'
					}
				} else {
					v = '0m'
				}
				return v;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.ylable {
		position: absolute;
		right: -30rpx;
		top: -30rpx;
		padding: 10rpx 30rpx;
		font-size: 20rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #C8101C;
		background-color: #FAE1E1;
		line-height: 23rpx;
		border-bottom-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
	}

	.importtwo {
		color: #FFAE68;
		background-color: #F9EBDD;
	}

	.importthree {
		color: #FFAE68;
		background-color: #F9EBDD;
	}

	.importfour {
		color: #478FDB;
		background-color: #E2EDFB;
	}

	.importfive {
		color: #59C38F;
		background-color: #E3F2E8;
	}

	.itembox {
		padding: 12rpx 20rpx;
		border-radius: 50rpx;
		background-color: #F3F3F3;
		min-width: 150rpx;
		max-width: 150rpx;
	}

	.margin_right {
		margin-right: 30rpx;
	}

	.smalltext {
		width: 300rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #737373;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.rightcontent {
		width: 100%;
		position: relative;
	}

	.bottom {
		width: 100%;
		background-color: #fff;
		padding: 30rpx 0;
	}

	.paddingbom {
		padding-bottom: 100rpx;
	}
</style>
